<template>
	<div class="FileUpload">
		<el-upload
			list-type="text"
			action="string"
			:file-list="fileList"
			:auto-upload="false"
			:on-preview="handlePictureCardPreview"
			:on-remove="handleRemove"
			:on-change="handleChange"
			:on-exceed="handleExceed"
			:accept="accept"
			:limit="uploadNum"
			:disabled="disabled"
		>
			<div style="display: flex;">
				<el-button size="small" type="primary" :size="size" :disabled="fileList.length==uploadNum">点击上传</el-button>
				<!-- <i v-if="fileList.length<uploadNum" class="el-icon-plus" style="padding:5px;border: 1px solid #1482F0;border-radius: 50%;"></i> -->
				<div slot="tip" class="el-upload__tip">只能上传不超过5M大小的文件</div>
			</div>
		</el-upload>
		<image-viewer :z-index="8000" v-if="picture.showViewer" :showIndex="picture.showIndex" :on-close="closeViewer"
		 :url-list="picture.urlList" uuid="fileId" url="fileUrl" />
	</div>
</template>

<script>
let that
//非父子组件传值
import bus from '../../../static/js/bus.js';
import { mapActions, mapGetters } from 'vuex';
export default {
	name: 'FileUpload',
	components: {
	},
	computed: {
		...mapGetters(['userInfo', 'api','orgInfo','size']) //获取
	},
	props: {
		uploadNum: {
			type: Number,
			default: 1
		},
	},
	data() {
		return {
			accept:".jpg,.jpeg,.png,.rar,.txt,.zip,.doc,.ppt,.xls,.pdf,.docx,.xlsx",
			disabled:false,//如果是查看设置为true禁止删除和添加
			fileList:[],
			updateImageIds:[],//选取的图片及附件id列表
			// 图片预览
			picture: {
				urlList: [{
					fileUrl: ''
				}], //图片查看列表
				showViewer: false, //图片查看器
				showIndex: 0, //点击显示图片第几个
			}
		};
	},
	mounted() {
		that=this
	},
	methods: {
		//查看功能
		seeImage(file,text){
			that.fileList=[]
			if(text=='查看'){
				that.disabled=true
			}else{
				that.disabled=false
			}
			if(file){
				that.fileList.push(JSON.parse(file)) 
			}
			
		},
		//上传头像
		updateImage(file, fileList) {
			let formData = new FormData();
			console.log('文件内容', file);
			formData.append('file', file.raw);
			//上传头像
			that.GLOBAL.doPost(that.api.GLOBAL_sys_common_upload, formData, function(data) {
				if (data.code == 200) {
					that.$message.success(data.message)
					that.updateImageIds.push(that.api.imageServe+ data.result.fileUrl);
					file.raw.id = that.api.imageServe+ data.result.fileUrl;
					file.url=that.api.imageServe+ data.result.fileUrl
					let req={
						fileList:fileList,
						updateImageIds:that.updateImageIds
					}
					that.$emit('fileUploadData',req)
				} else {
					that.updateError()
				}
			},function(err){
				that.updateError()
			})
		},
		//失败不展示在界面上
		updateError(){
			that.fileList = fileList.filter(res => {
				if (res.uid != file.uid) {
					return res;
				}
			});
		},
		// 限制大小
		checkFilesize(filesize){
			return new Promise((result,reject)=>{
				that.GLOBAL.doPost(that.api.GLOBAL_file_fileInfo_checkFilesize,{filesize:filesize},function(res){
					result(res)
				})
			})
			
		},
		//选取文件
		async handleChange(file, fileList) {
			console.log(file, fileList);
			//限制大小
			if (file.raw.size>5242880) {
				that.$message({
					type: 'warning',
					message: '超出5M大小'
				});
				that.fileList = fileList.filter(res => {
					if (res.uid != file.uid) {
						return res;
					}
				});
				return;
			} else {
				//上传头像
				that.updateImage(file, fileList);
				that.fileList = fileList; //上传成功后显示在界面上
			}
		},
		// 移除文件时的钩子
		handleRemove(file, fileList) {
			console.log(file);
			that.fileList=fileList
			that.updateImageIds = that.updateImageIds.filter(res => {
				if (res != file.raw.id) {
					return res;
				}
			});
			let req={
				fileList:fileList,
				updateImageIds:that.updateImageIds
			}
			that.$emit('fileUploadData',req)
		},
		//点击文件时的钩子
		handlePictureCardPreview(file) {
			console.log(file);
			if(file.raw&&file.raw.type.includes('image')||file.type.includes('image')){//如果是图片
				that.picture.urlList[0].fileUrl = file.url;
				that.picture.showViewer = true;
			}else{//附件在线浏览
				window.open(file.url, '_blank');
			}
		},
		//文件超出限制的构子
		handleExceed(files, fileList) {
			this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
		},
		closeViewer(){
			that.picture.showViewer = false;
		}
	}
};
</script>

<style scoped="scoped" lang="scss">
	.FileUpload{
		width: 100%;
	}
</style>
